const path = require('path'); // 导入 node.js 中专门操作路径的模块
//const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //清除dist目录
const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动生成html
const htmlPlguin = new HtmlWebpackPlugin({
    template: './src/index.html', //指定要用到的模板文件
    filename: 'index.html' //生成在目录中
})
const VueLoaderPlugin = require('vue-loader/lib/plugin'); //vue-loader
module.exports = {
    mode: 'development', // mode 用来指定构建模式
    entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路径
    devtool: 'inline-source-map',
    output: {
        path: path.join(__dirname, './dist'), // 输出文件的存放路径
        filename: 'bundle.js', // 输出文件的名称
    },
    plugins: [
        // new CleanWebpackPlugin(),
        //webpack-server必须要配置这个才能运行后直接显示出html页面。
        htmlPlguin,
        new VueLoaderPlugin() // 请确保引入这个插件！
    ],
    module: {
        rules: [{
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.(png|svg|gif|jpe?g)$/,
                //设置资源目录
                type: 'asset',
                generator: {
                    filename: "img/[name].[hash:4][ext]",
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: 30 * 1024
                    }
                }
            },
            // exclude 为排除项，表示 babel-loader 不需要处理 node_modules 中的 js 文件
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
            { test: /\.vue$/, loader: 'vue-loader' }
        ]
    },

}